import { Container, Image } from "react-bootstrap";
import "./aboutus.css";
import { useId } from "react";

interface AboutItem{
    title:string;
    description:string;
    image:any,
    imgsize:any
}

interface AboutProps{
    items?:Array<AboutItem>
}

const About:React.FC<AboutProps> = (props?:AboutProps)=>{

    const listId = useId();

    return (<Container id="aboutpage" fluid className="d-flex flex-column m-0 p-1">
        <ul id={listId} className="m-2 p-0">
            {props?.items?.map((item,index)=>{
                return (<li key={`${index}`}>
                <h2>{item.title}</h2>
                <Container fluid style={{overflow:'hidden'}}>
                    <p>
                        {item.description}
                    </p>
                    <Image src={item.image} style={{aspectRatio:item.imgsize.width/item.imgsize.height}}/>
                </Container>
            </li>)
            })}
        </ul>
    </Container>)
}

About.defaultProps = {
    items:[
        {
            title:"Our Mission",
            description:"There's this notion that to grow a business, you have to be ruthless. But we know there's a better way to grow. One where what's good for the bottom line is also good for customers. We believe businesses can grow with a conscience, and succeed with a soul — and that they can do it with inbound. That's why we've created an ecosystem uniting software, education, and community to help businesses grow better every day.",
            image:require("../../resources/images/mission_pic.jpeg"),
            imgsize:{
                width:900,
                height:360
            }
        },
        {
            title:"Our Story",
            description:`As fellow graduate students at MIT in 2004, Brian and Dharmesh noticed a shift in the way people shop and buy. Consumers were no longer tolerating interruptive bids for their attention — in fact, they'd gotten really, really good at ignoring them.
            From this shift, a company was born: HubSpot. It was founded on "inbound", the notion that people don't want to be interrupted by marketers or harassed by salespeople — they want to be helped.
            Today, the inbound movement continues to empower businesses around the world to stop interrupting, start helping, and return their focus to the customer.`,
            image:require("../../resources/images/our-story-pic.jpeg"),
            imgsize:{
                width: 975,
                height: 647
            }
        },
        {
            title:"Our Team",
            description:"The HubSpot customer platform makes it easy for your entire company to work together — from marketing, to sales, to customer service. Each hub is powerful alone, but they're even better together.",
            image:require("../../resources/images/team_pic.jpeg"),
            imgsize:{
                width:600,
                height:388
            }
        },
        {
            title:"Our Customer Platform",
            description:"The HubSpot customer platform makes it easy for your entire company to work together — from marketing, to sales, to customer service. Each hub is powerful alone, but they're even better together.",
            image:require("../../resources/images/customer-service-pic.jpeg"),
            imgsize:{
                width:474,
                height:296
            }
        }
    ]
}


export default About;
